<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .profile-container {
            max-width: 1200px;
            margin: 2rem auto;
        }
        .profile-header {
            background: linear-gradient(45deg, #0d6efd, #0dcaf0);
            color: white;
            padding: 3rem 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
        }
        .avatar-container {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 1rem;
        }
        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid rgba(255,255,255,0.3);
            object-fit: cover;
        }
        .avatar-upload {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 32px;
            height: 32px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #0d6efd;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stats-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .stats-icon {
            width: 48px;
            height: 48px;
            background: #e7f1ff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0d6efd;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        .stats-value {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .info-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .info-item {
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eee;
        }
        .info-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .info-label {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        .info-value {
            font-weight: 500;
        }
        .edit-btn {
            color: #0d6efd;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .edit-btn:hover {
            text-decoration: underline;
        }
        .nav-pills .nav-link {
            color: #6c757d;
            padding: 0.8rem 1.5rem;
            border-radius: 10px;
            margin-right: 0.5rem;
        }
        .nav-pills .nav-link.active {
            background-color: #0d6efd;
            color: white;
        }
        .tab-content {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-top: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/resident">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/resident">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/create">预约回收</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/guide">分类指南</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container profile-container">
        <!-- 个人信息头部 -->
        <div class="profile-header">
            <div class="avatar-container mb-3">
                <img th:src="${user.avatar != null ? user.avatar : '/images/default-avatar.png'}" alt="用户头像" class="avatar">
                <label for="avatarUpload" class="avatar-upload">
                    <i class="fas fa-camera"></i>
                </label>
                <input type="file" id="avatarUpload" hidden accept="image/*">
            </div>
            <h4 class="text-center mb-2" th:text="${user.realName}">用户名</h4>
            <p class="text-center mb-0 text-white-50" th:text="${user.phone}">手机号</p>
        </div>

        <!-- 数据统计 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="stats-value" th:text="${totalOrders}">12</div>
                    <div class="stats-label">总订单数</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-weight-hanging"></i>
                    </div>
                    <div class="stats-value" th:text="${totalWeight + 'kg'}">120kg</div>
                    <div class="stats-label">总回收重量</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stats-value" th:text="${averageRating}">4.8</div>
                    <div class="stats-label">平均评分</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card">
                    <div class="stats-icon">
                        <i class="fas fa-coins"></i>
                    </div>
                    <div class="stats-value" th:text="${'¥' + totalIncome}">¥360</div>
                    <div class="stats-label">总收益</div>
                </div>
            </div>
        </div>

        <!-- 选项卡导航 -->
        <ul class="nav nav-pills mb-3" id="profileTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#info">
                    <i class="fas fa-user me-2"></i>基本信息
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#address">
                    <i class="fas fa-map-marker-alt me-2"></i>地址管理
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#security">
                    <i class="fas fa-shield-alt me-2"></i>账号安全
                </button>
            </li>
        </ul>

        <!-- 选项卡内容 -->
        <div class="tab-content" id="profileTabContent">
            <!-- 基本信息 -->
            <div class="tab-pane fade show active" id="info">
                <div class="info-card">
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">用户名</div>
                            <div class="info-value" th:text="${user.username}">username</div>
                        </div>
                        <span class="edit-btn" onclick="editInfo('username')">
                            <i class="fas fa-edit me-1"></i>修改
                        </span>
                    </div>
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">真实姓名</div>
                            <div class="info-value" th:text="${user.realName}">张三</div>
                        </div>
                        <span class="edit-btn" onclick="editInfo('realName')">
                            <i class="fas fa-edit me-1"></i>修改
                        </span>
                    </div>
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">手机号码</div>
                            <div class="info-value" th:text="${user.phone}">13800138000</div>
                        </div>
                        <span class="edit-btn" onclick="editInfo('phone')">
                            <i class="fas fa-edit me-1"></i>修改
                        </span>
                    </div>
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">电子邮箱</div>
                            <div class="info-value" th:text="${user.email}">example@email.com</div>
                        </div>
                        <span class="edit-btn" onclick="editInfo('email')">
                            <i class="fas fa-edit me-1"></i>修改
                        </span>
                    </div>
                </div>
            </div>

            <!-- 地址管理 -->
            <div class="tab-pane fade" id="address">
                <div class="info-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0">我的地址</h5>
                        <button class="btn btn-primary btn-sm" onclick="addAddress()">
                            <i class="fas fa-plus me-1"></i>新增地址
                        </button>
                    </div>
                    <div th:each="address : ${addresses}" class="info-item">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <div class="info-value mb-1" th:text="${address.address}">详细地址</div>
                                <div class="text-muted">
                                    <span th:text="${address.contactName}">联系人</span>
                                    <span th:text="${address.contactPhone}" class="ms-3">联系电话</span>
                                </div>
                            </div>
                            <div>
                                <span class="edit-btn me-3" th:onclick="'editAddress(' + ${address.id} + ')'">
                                    <i class="fas fa-edit me-1"></i>编辑
                                </span>
                                <span class="edit-btn text-danger" th:onclick="'deleteAddress(' + ${address.id} + ')'">
                                    <i class="fas fa-trash-alt me-1"></i>删除
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 账号安全 -->
            <div class="tab-pane fade" id="security">
                <div class="info-card">
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">登录密码</div>
                            <div class="info-value">已设置</div>
                        </div>
                        <span class="edit-btn" onclick="changePassword()">
                            <i class="fas fa-key me-1"></i>修改密码
                        </span>
                    </div>
                    <div class="info-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="info-label">手机验证</div>
                            <div class="info-value" th:text="${user.phone}">13800138000</div>
                        </div>
                        <span class="edit-btn" onclick="changePhone()">
                            <i class="fas fa-mobile-alt me-1"></i>更换手机
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 地址管理模态框 -->
    <div class="modal fade" id="addressModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addressModalLabel">添加地址</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addressForm">
                        <input type="hidden" name="id">
                        <div class="mb-3">
                            <label class="form-label">详细地址</label>
                            <input type="text" class="form-control" name="address" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">联系人</label>
                            <input type="text" class="form-control" name="contactName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">联系电话</label>
                            <input type="tel" class="form-control" name="contactPhone" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveAddress()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 头像上传
        $('#avatarUpload').change(function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('avatar', file);

            fetch('/api/user/avatar', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || '上传失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        });

        // 编辑基本信息
        function editInfo(field) {
            const currentValue = $('.info-value').filter(function() {
                return $(this).text() === field;
            }).text();

            const newValue = prompt(`请输入新的${field}：`, currentValue);
            if (!newValue) return;

            fetch('/api/user/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    field: field,
                    value: newValue
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || '修改失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        }

        // 添加地址
        function addAddress() {
            // 重置表单
            $('#addressForm')[0].reset();
            $('#addressForm').find('[name="id"]').val('');
            $('#addressModalLabel').text('添加地址');
            // 显示模态框
            $('#addressModal').modal('show');
        }

        // 编辑地址
        function editAddress(addressId) {
            // 显示地址编辑模态框
            $('#addressModal').modal('show');
            // 加载地址信息
            fetch(`/api/address/${addressId}`)
                .then(response => response.json())
                .then(data => {
                    // 填充表单
                    $('#addressForm').find('[name="address"]').val(data.address);
                    $('#addressForm').find('[name="contactName"]').val(data.contactName);
                    $('#addressForm').find('[name="contactPhone"]').val(data.contactPhone);
                });
        }

        // 删除地址
        function deleteAddress(addressId) {
            if (!confirm('确定要删除该地址吗？')) return;

            fetch(`/api/address/${addressId}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || '删除失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        }

        // 修改密码
        function changePassword() {
            const oldPassword = prompt('请输入原密码：');
            if (!oldPassword) return;

            const newPassword = prompt('请输入新密码：');
            if (!newPassword) return;

            const confirmPassword = prompt('请确认新密码：');
            if (newPassword !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }

            fetch('/api/user/password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    oldPassword: oldPassword,
                    newPassword: newPassword
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('密码修改成功，请重新登录');
                    location.href = '/logout';
                } else {
                    alert(data.message || '修改失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        }

        // 更换手机号
        function changePhone() {
            const newPhone = prompt('请输入新手机号：');
            if (!newPhone) return;

            const code = prompt('请输入验证码：');
            if (!code) return;

            fetch('/api/user/phone', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    phone: newPhone,
                    code: code
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message || '修改失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        }

        // 保存地址
        function saveAddress() {
            const formData = {
                id: $('#addressForm').find('[name="id"]').val(),
                address: $('#addressForm').find('[name="address"]').val(),
                contactName: $('#addressForm').find('[name="contactName"]').val(),
                contactPhone: $('#addressForm').find('[name="contactPhone"]').val()
            };

            const url = formData.id ? `/api/address/${formData.id}` : '/api/address';
            const method = formData.id ? 'PUT' : 'POST';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    $('#addressModal').modal('hide');
                    location.reload();
                } else {
                    alert(data.message || '保存失败，请重试');
                }
            })
            .catch(error => {
                alert('系统错误，请重试');
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html> 